{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}
<form id="provision_create_flow" class="section_content" hidden>
  <div class="row">
    <div class="large-12 columns">
      <h4>
        {{tr "Create Service"}}
        <span class="total_cost_div" hidden>
          <small class="cost_value">0.00</small>
          <small>{{tr "COST"}} / {{tr "HOUR"}}</small>
        </span>
      </h4>
    </div>
  </div>
  <div class="row">
    <div class="medium-6 columns">
      <input type="text" id="flow_name"  class="provision-input" placeholder="{{tr "Service Name"}}"/>
    </div>
    <div class="medium-6 large-3 columns">
      <button href="#" class="button success expanded" type="submit">{{tr "Create"}}</button>
      <div data-alert class="label alert-box-error" hidden></div>
    </div>
  </div>
  <fieldset id="provisionFlowInstantiateTemplatesRow">
    <legend>{{tr "Template"}}</legend>
    <div class="row">
      <div class="large-12 columns">
        <ul class="accordion provision_accordion_flow_template" data-accordion data-allow-all-closed="true">
          <li class="is-active accordion-item" data-accordion-item>
            <a href="#provision_dd_flow_template" class="accordion-title">
              <span class="selected_template">
                <span class="provision-logo selected_template_logo"></span>
                <span class="selected_template_name"></span>
                <span> <i class="fa fa-pencil"/></span>
              </span>
            </a>
            <div id="provision_dd_flow_template" class="provision_select_flow_template accordion-content" data-tab-content>
              <div class="row">
                <div class="medium-6 columns">
                  <div class="row collapse">
                    <div class="medium-5 columns">
                      <input type="search" class="provision-search-input" placeholder="Search" id="provision_create_flow_template_search"/>
                    </div>
                    <div class="medium-4 columns end">
                      <button type="button" data-toggle="provisionServiceInstantiateLabelsDropdown" class="secondary button dropdown"> <i class="fa fa-tags"/> {{tr "Labels"}}
                      </button>
                      <div id="provisionServiceInstantiateLabelsDropdown" class="dropdown-pane large labels-dropdown" data-dropdown>
                      </div>
                    </div>
                  </div>
                  <div class="medium-6 columns"></div>
                </div>
              </div>
              <div class="row provision_select_flow_template">
                <div class="large-12 columns">
                  <table id="provision_flow_templates_table">
                    <thead hidden>
                      <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Labels</th>
                      </tr>
                    </thead>
                    <tbody hidden></tbody>
                  </table>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </fieldset>
  <div class="row">
    <div class="provision_network_selector small-12 columns"></div>
    <div class="provision_custom_attributes_selector large-6 medium-8 columns"></div>
  </div>
  <div id="provision_customize_flow_template" class="row" hidden></div>
</form>